<template>
  <div class="step-panel">
    <div v-if="result && result.success && result.msg && result.msg.includes('对比成功')">
      <div class="success-icon">
        <svg width="80" height="80" viewBox="0 0 80 80">
          <circle cx="40" cy="40" r="38" fill="none" stroke="#4CAF50" stroke-width="4"/>
          <polyline points="25,43 37,55 56,30" fill="none" stroke="#4CAF50" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="success-title">认证成功</div>
      <div class="success-desc">您已完成实名认证</div>
    </div>
    <div v-else-if="result && result.msg && result.msg.includes('人脸不一致')">
      <div class="error-icon">
        <svg width="80" height="80" viewBox="0 0 80 80">
          <circle cx="40" cy="40" r="38" fill="none" stroke="#e53935" stroke-width="4"/>
          <line x1="28" y1="28" x2="52" y2="52" stroke="#e53935" stroke-width="6" stroke-linecap="round"/>
          <line x1="52" y1="28" x2="28" y2="52" stroke="#e53935" stroke-width="6" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="error-title">认证失败</div>
      <div class="error-desc">人脸不一致，请重试</div>
    </div>
    <button class="back-btn" @click="goBack">返回控制台</button>
  </div>
</template>

<script setup>
import StepProgress from './StepProgress.vue'
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps(['userId', 'idFrontUrl', 'idBackUrl', 'name', 'id', 'videoBlob'])
const result = ref(null)
const router = useRouter()

onMounted(async () => {
  const formData = new FormData()
  formData.append('user_id', props.userId)
  formData.append('id_card_front_url', props.idFrontUrl)
  formData.append('id_card_back_url', props.idBackUrl)
  if (props.videoBlob) {
    formData.append('face_image', props.videoBlob, 'face_image.jpg')
  }
  try {
    const res = await fetch('http://localhost:8000/user/face-compare/', {
      method: 'POST',
      body: formData
    })
    const data = await res.json()
    console.log(data)
    result.value = data
    if (data.success && data.msg && data.msg.includes('对比成功')) {
      alert('人脸对比成功！')
      // 这里可以 emit('next') 或跳转到下一个页面，如需自动跳转请补充
    } else {
      alert(data.msg || '人脸不一致，请重试')
      // 不进入下一步
    }
  } catch (e) {
    alert('人脸比对接口异常或返回格式错误')
    result.value = { success: false, msg: '接口异常' }
  }
})

function goBack() {
  router.push('/home')
}
</script>

<style scoped>
.title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #666;
}
.result-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 32px 0 18px 0;
}
.success-icon {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.success-title {
  font-size: 28px;
  color: #4CAF50;
  font-weight: bold;
  margin: 18px 0 10px 0;
  text-align: center;
}
.success-desc {
  font-size: 17px;
  color: #888;
  margin-bottom: 18px;
  text-align: center;
}
.error-icon {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.error-title {
  font-size: 28px;
  color: #e53935;
  font-weight: bold;
  margin: 18px 0 10px 0;
  text-align: center;
}
.error-desc {
  font-size: 17px;
  color: #e53935;
  margin-bottom: 18px;
  text-align: center;
}
.back-btn {
  width: 100%;
  background: #3498db;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 32px;
}
.back-btn:hover {
  background: #217dbb;
}
</style> 